<template>
  <div class="newborn">
    <van-nav-bar title="新碟上架" left-arrow @click-left="$router.go(-1)" />
    <div class="title">
      <h3>热门新碟</h3>
      <div class="hr"></div>
    </div>
    <van-row>
      <van-col
        span="8"
        v-for="(item, index) in bornList"
        :key="item.id"
        @click="isbornClick(index)"
      >
        <van-image
          width="90"
          height="100"
          fit="cover"
          :src="item.picUrl"
          lazy-load
        />
        <p>{{ item.name }}</p>
        <p class="hui">{{ item.artist.name }}</p>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { getBorn } from './newborn'
import { Toast } from 'vant'
export default {
  name: 'getBorn',
  data () {
    return {
      bornList: [],
      arr: [] //新碟id
    }
  },
  async created () {
    let res = await getBorn()
    console.log(res)
    this.bornList = res.data.albums
    // 新碟id
    this.bornList.forEach(v => {
      // console.log(v.id)
      this.arr.push(v.id)
    })
    // console.log(this.arr)
  },
  methods: {
    isbornClick (index) {
      // console.log(this.arr[index])
      // this.$router.push({
      //   path: '/newbornText',
      //   query: { id: this.arr[index] }
      // })
      Toast.fail('没做')
    }
  }
}
</script>

<style>
.newborn {
  margin-left: 15px;
  width: 90%;
}
.title h3 {
  font-size: 16px;
}
.hr {
  height: 3px;
  background-color: #c20c0c;
}
.van-row {
  margin-top: 16px;
}
.van-col p {
  text-align: center;
  font-size: 14px;
  margin: 5px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hui {
  color: #666666;
}
</style>
